<template>
  <div style="text-align: center;justify-content: center;align-items: center;justify-items: center">
    <div class="header">
      <van-nav-bar
          title="会员中心"
          left-arrow
          style="background-color: #dfba8b;color: white"
          @click-left="onClickLeft"
      />
    </div>

    <div class="cen"> <!-- 调整 margin-top 的值来上移，这里假设上移 20 像素 -->
      <div style="height: 200px;width: 100%">
        <div style="padding: 20px 3px 1px 4px;">
          <van-popover v-model:show="showPopover" placement="bottom-start">
            <van-grid
                :border="false"
                style="width: 330px;height:300px;overflow-y: auto;"
                class="centered-grid"
            >
              <div style="width: 300px;height: 550px;background-color: white;display: flex;align-items: center;flex-direction: column;padding: 10px">

              <h5>成长值规则</h5>
                <span style="font-size: 12px">
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;成长值获取为：每买一件商品根据金额计算，每件购买金额达到一定值，可获得一定数量的成长值。花费金额与成长值为1:2。
                  例如：购买￥100的商品，可获得200成长值。
                </span>
                <el-table :data="plusRuleAll">
                  <el-table-column prop="level" label="等级"/>
                  <el-table-column prop="values" label="升级所需成长值"/>
                  <el-table-column prop="discount" label="折扣">
                    <template slot-scope="{ row }">
                      {{ row.discount }}折
                    </template>
                  </el-table-column>
                  <el-table-column prop="commission" label="佣金"/>
                </el-table>
              </div>
            </van-grid>
            <template #reference>
              <span style="color: #bfbfbf;" @click="findPlusRule()">查看成长值</span>
            </template>
          </van-popover>
          &nbsp;
          &nbsp;
          &nbsp;
          <span style="font-size: 11px;padding-top: 6px;padding-left: 6px;color: #bfbfbf;">  ▶</span>
        </div>
        <div style="padding: 16px 0 0 3px;">
          <span style="color: #bfbfbf;">{{ members.growthValue }}</span>
        </div>
        <br>
        <br>
        <van-progress
            :percentage="percentage"
            :stroke-width="8"
            color="#333"
            track-color="#eee"
            :text-show="false"
        />
        <br>
        <br>
        <div>
          <span style="color: #bfbfbf;">VIP{{ members.grade }}</span>
          <br>
          <span v-if="members.grade<9"
                style="color: #bfbfbf;">还差{{ members.plusRule.values - members.growthValue }}成长值升级至VIP{{ members.plusRule.level }}</span>
          <span v-if="members.grade>=9" style="color: #bfbfbf;">已经满级</span>
        </div>
        <div style="width: 80px;height:30px;padding:0 0 0 270px;">

          <span style="color: #bfbfbf;"><van-icon name="setting" size="16"/>我的资料</span>
        </div>
      </div>
    </div>

    <br>

    <div class="benefit-card">
      <div class="title">
        <span>—— 我的专属权益 ——</span>
      </div>
      <div class="benefit-items">
        <div class="benefit-item">
          <van-icon name="discount" size="30" color="#dfba8b"/>
          <div class="benefit-text">
            <span style="color: black;font-size: 12px;width: 100%">{{ members.discount }}折扣</span>
            <span style="color: #919191;font-size: 12px;width: 100%">购买店内商品</span>
          </div>
        </div>
        <div class="benefit-item">
          <van-icon name="star" size="30" color="#dfba8b"/>
          <div class="benefit-text">
            <span style="color: black;font-size: 12px;width: 100%">{{ members.commission }}佣金</span>
            <span style="color: #919191;font-size: 12px;width: 100%">我的下级购买</span>
          </div>
        </div>
        <div class="benefit-item" v-if="members.grade<9">
          <van-icon name="star-o" size="30" color="#dfba8b"/>
          <div class="benefit-text">
            <span
                style="color: black;font-size: 12px;width: 100%">{{ members.plusRule.discount }}折扣{{ members.plusRule.commission }}佣金</span>
            <span style="color: #919191;font-size: 12px;width: 100%">下一级可得</span>
          </div>
        </div>
      </div>
    </div>
    <br>

    <div class="benefit-card">
      <div class="title">
        <span>—— 顶级合伙人权益 ——</span>
      </div>
      <div style="width: 405px;background-color: #fbf6f1" v-if="members.growthValue<50000">距离顶级合伙人还要{{ 50000 - members.growthValue }}分</div>
      <br>
      <div class="benefit-items">
        <div class="benefit-item" style="  width: 50%;">
          <van-icon name="discount" size="30" color="#dfba8b"/>
          <div class="benefit-text">
            <span style="color: black;font-size: 12px;width: 100%">8.5折扣</span>
            <span style="color: #919191;font-size: 12px;width: 100%">购买店内商品</span>
          </div>
        </div>
        <div class="benefit-item" style="  width: 50%;">
          <van-icon name="star" size="30" color="#dfba8b"/>
          <div class="benefit-text">
            <span style="color: black;font-size: 12px;width: 100%">10%佣金</span>
            <span style="color: #919191;font-size: 12px;width: 100%">我的下级购买</span>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import {findMember, findPlusRule} from "@/api/wode/user";

export default {
  data() {
    return {
      members: {},
      percentage: null,
      showPopover: false,
      plusRuleAll:[]
    }
  },
  methods: {
    findPlusRule() {
      console.log(11111)
      this.showPopover = true
    },
    onClickLeft() {
      this.$router.push('/wode')
    },
    findMemberMapperUser() {
      const token = localStorage.getItem("token");
      if (token == null) {
        this.$router.push('/')
        this.$toast('请先登录');
      } else {
        findMember(token).then(res => {
          this.members = res.data
          this.percentage = (this.members.growthValue / this.members.plusRule.values).toFixed(2) * 100
        })
      }
    },

  },
  created() {
    this.findMemberMapperUser()
    findPlusRule().then(res => {
      this.plusRuleAll = res.data
    })
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}

.header {
  background-color: #dfba8b;
  width: 100%;
  height: 300px;
}

.cen {

  margin-top: -180px;
  width: 360px;
  height: 180px;
  background-color: #414041;
  border-radius: 20px;
  padding: 20px;
  display: flex;
}

span {

}

.benefit-card {
  text-align: center;
  justify-content: center;
  align-items: center;
  justify-items: center;
  width: 360px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.title {
  width: 100%;
  height: 30px;
  text-align: center;
  margin-bottom: 20px;
  display: inline-block;
}

.benefit-items {
  text-align: center;
  justify-content: center;
  align-items: center;
  justify-items: center;
  display: flex;
}

.benefit-item {
  text-align: center;
  display: inline-block;
  flex-direction: column;
  align-items: center;
}

.benefit-text {
  margin-top: 10px;
}

.centered-grid {
  display: grid;
  place-items: center;
  grid-template-columns: repeat(2, 1fr);
}
</style>
